<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="<%=basePath%>easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="<%=basePath%>easyui/demo/demo.css">
	<script type="text/javascript" src="<%=basePath%>easyui/jquery.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
    var SysUserGd = null;
    	function newUser(){
    		$('#insertDlg').dialog('open').dialog('setTitle','新增');
    		$('#insertFm').form('clear');
    		url = '<%=basePath%>SysUser/insert';
    	}
		function editUser(){
			var row = $('#sysUser').datagrid('getSelected');
			if (row){
				$('#updateDlg').dialog('open').dialog('setTitle','修改');
				$('#updateFm').form('load',row);
				url = '<%=basePath%>SysUser/update';
			}    
    	}
    
    	function insertUser(){
    		$('#insertFm').form('submit',{
    			url: url,
    			onSubmit: function(){
    				return $(this).form('validate');
    			},
    			success: function(result){
    				var result = eval('('+result+')');
    				if (result.code=='insertError'){
    					$.messager.show({
    						title: 'Error',
    						msg: result.message
    					});
    				} else{
    					$('#insertDlg').dialog('close');		// close the dialog
    					$('#sysUser').datagrid('reload');	// reload the user data
    				}
    			}
    		});
    	}
    	
    	function updateUser(){
    		$('#updateFm').form('submit',{
    			url: url,
    			onSubmit: function(){
    				return $(this).form('validate');
    			},
    			success: function(result){
    				var result = eval('('+result+')');
    				if (result.code=='updateError'){
    					$.messager.show({
    						title: 'Error',
    						msg: result.message
    					});
    				}else{
    					$('#updateDlg').dialog('close');		// close the dialog
    					$('#sysUser').datagrid('reload');	// reload the user data
    				}
    			}
    		});
    	}
    	
		function removeUser(){
			var row = $('#sysUser').datagrid('getSelected');
			if (row){
				$.messager.confirm('Confirm','确认要删除此条记录么?',function(r){
					if (r){
						$.get('<%=basePath%>SysUser/delete/'+row.id,function(result){
							if (result.code=='deleteOk'){
								$('#sysUser').datagrid('reload');	// reload the user data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.message
								});
							}
						},'json');
					}
				});
			}
		}
		$(function(){
			SysUserGd = $('#SysUserDg').datagrid({
				title : 'datagrid实例',
				iconCls : 'icon-ok',
				width : 600,
				pagination : true,//分页
				rownumbers : true,//行数
				pageSize : 10,//默认选择的分页是每页5行数据
				pageList : [ 10, 15, 20 ],//可以选择的分页集合
//				queryParams: form2Json("searchform"),
				nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
				striped : true,//设置为true将交替显示行背景。
				collapsible : true,
				url:'<%=basePath%>SysUser/select',
				loadMsg : '数据装载中......',
				singleSelect:true,//为true时只能选择单行
				fitColumns:true,//允许表格自动缩放，以适应父容器
				remoteSort : false,
				headers: {
    				'Authorization': 'Bearer <jwt token>'
  				},
 			 	columns:[[
        			{field:'id',title:'ID',width:80,sortable:true},
        			{field:'username',title:'用户',width:80,sortable:true},
        			{field:'password',title:'密码',width:80,sortable:true},
        			{field:'realname',title:'姓名',width:80,sortable:true}        			
    			]],
				toolbar: [{
					iconCls: 'icon-add',
					handler: newUser
					},'-',{
					iconCls: 'icon-edit',
					handler: editUser
				}]
			});	

		}); 

        //点击查找按钮出发事件
    function searchFunc() {
        $("#SysUserDg").datagrid("load", sy.serializeObject($("#searchForm").form()));//将searchForm表单内的元素序列为对象传递到后台
    }
    function clearSearch() {
        $("#SysUserDg").datagrid("load", {});//重新加载数据，无填写数据，向后台传递值则为空
        $("#searchForm").find("input").val("");//找到form表单下的所有input标签并清空
    }
    

var sy = $.extend({}, sy);/*定义一个全局变量*/

sy.serializeObject = function (form) { /*将form表单内的元素序列化为对象，扩展Jquery的一个方法*/
    var o = {};
    $.each(form.serializeArray(), function (index) {
        if (o[this['name']]) {
            o[this['name']] = o[this['name']] + "," + this['value'];
        } else {
            o[this['name']] = this['value'];
        }
    });
    return o;
};

       
    </script>
</head>
<body>

	<div data-options="region:'north',title:'高级查询'" style="height: 100px; background: #F4F4F4;">
 		<form id="searchForm">
                    <table>
                        <tr>
                            <th>用户：</th>
                            <td>
                                <input name="username" /></td>

                            <th>姓名：</th>
                            <td>
                                <input name="realname" /></td>
                            <td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="searchFunc();">查找</a></td>
                            <td><a class="easyui-linkbutton" href="javascript:void(0);" onclick="clearSearch();">清空</a></td>
                        </tr>
                    </table>
                </form>
	</div>
	<div id="SysUserDg">
	</div>
<!-- 新增 -->
    <div id="insertDlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
    		closed="true" buttons="#insert-buttons">
    	<form id="insertFm" method="post">
    		<div class="fitem">
    			<label>用户:</label>
    			<input name="username" class="easyui-validatebox" required="true">
    		</div>
    		<div class="fitem">
    			<label>密码:</label>
    			<input name="password" class="easyui-validatebox" required="true">
    		</div>
    		<div class="fitem">
    			<label>姓名:</label>
    			<input name="realname">
    		</div>
    	</form>
    </div>
    <div id="insert-buttons">
    	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="insertUser()">保存</a>
    	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
<!-- 更新 -->    
    <div id="updateDlg" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
    		closed="true" buttons="#update-buttons">
    	<form id="updateFm" method="post">
    		<input name="id" type="hidden">
    		<div class="fitem">
    			<label>用户:</label>
    			<input name="username" class="easyui-validatebox" required="true">
    		</div>
    		<div class="fitem">
    			<label>密码:</label>
    			<input name="password" class="easyui-validatebox" required="true">
    		</div>
    		<div class="fitem">
    			<label>姓名:</label>
    			<input name="realname">
    		</div>
    	</form>
    </div>    
    <div id="update-buttons">
    	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="updateUser()">更新</a>
    	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">取消</a>
    </div>
</body>
</html>
